<template>
  <el-dialog
    title="绑定关联的空间"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <p class="info-deep">由于群组功能升级，需要绑定一个学习空间才能继续使用群组功能。</p>
    <div class="flex">
      <el-input
        v-model.trim="value"
        type="number"
        placeholder="请输入空间id"
        @keyup.enter.native="searchSpaces"
      />
      <el-button type="primary" class="m-l-10" @click="searchSpaces" :loading="loading">
        {{ loading ? '' : '搜索' }}
      </el-button>
    </div>
    <p class="info">空间id可以在空间页面的浏览器地址栏查看。</p>
    <template v-if="space.title">
      <div class="easy-container flex align-items-center">
        <el-avatar :src="space.avatar" class="m-r-10" />
        <div>
          <div class="title line1" style="max-width: 30rem;">{{ space.title }}</div>
          <div class="line1" style="max-width: 30rem;" :title="space.desc">{{ space.desc }}</div>
        </div>
        <el-button type="primary" @click="setRelated" class="m-l-auto">设置关联</el-button>
      </div>
    </template>
    <template v-else>
      <div class="easy-container info flex align-items-center content-center">
        没有找到id为&nbsp;
        <el-tag type="warning" size="mini">{{ space.id }}</el-tag>
        &nbsp;的空间
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { formatSpace } from '../format';

export default {
  name: 'add-related-space-dialog', // 进入群组时判断群组有没有绑定空间
  data() {
    return {
      dialogVisible: false,
      value: '',
      loading: false,
      space: {},
    };
  },
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
    ...mapGetters(['isWebAdmin', 'isGroupOwner']),
    groupId() { return this.curGroup.id; },
  },
  mounted() {
    // 很奇怪的是不管怎么写都会报错，只能在这里写个循环来判定了
    const that = this;
    const interval = setInterval(() => {
      if (that.groupId) {
        that.bindingReminder();
        clearInterval(interval);
      }
    }, 100);
  },
  methods: {
    // 搜索空间
    searchSpaces() {
      if (!this.value) return;
      this.loading = true;
      this.$api.spaces.show({ spaceId: this.value })
        .then((res) => { this.space = formatSpace(res.data); })
        .catch(() => { this.space = { id: this.value }; })
        .then(() => { this.loading = false; });
    },
    // 设置关联空间
    setRelated() {
      const msg = `<div>确认添加与空间 <strong class="el-alert--error is-light is-bold">${this.space.title}</strong> 的关联吗？添加后不可修改！</div>`;
      this.$msgbox({
        title: '提示',
        message: msg,
        dangerouslyUseHTMLString: true,
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在关联...',
            });
            this.$api.groups.settingRelatedSpaces({
              groupId: this.$route.params.groupId,
              spacesIds: [this.space.id],
            }).then(() => {
              this.$message.success('设置成功');
              this.$emit('reload');
              this.dialogVisible = false;
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
    // 提醒绑定
    bindingReminder() {
      if (this.curGroup.space.id) return;
      if (this.isWebAdmin || this.isGroupOwner) this.dialogVisible = true;
      else {
        this.$alert('由于功能升级，当前群组未设置关联的空间，暂时无法使用。请联系群组管理员进行设置！', {
          confirmButtonText: '确定',
          callback: () => {
            this.goBack();
          },
        });
      }
    },
  },
  watch: {
    groupId() { this.bindingReminder(); },
  },
};
</script>

<style></style>
